<section id="contact-hero" class="hero-banner">

  <div class="container">
    <app-breadcrumb></app-breadcrumb>

    <div class="row my-4 mb-md-5">
      <div class="col-sm-12">
        <h1 class="page-title" id="contentStart" tabindex="-1" translate>connect.title</h1>

        <p class="lead" *withLang="'en'">
          OrgBook BC is continuously evolving. More information and features will be added
          to the site on an ongoing basis, and we welcome feedback to help us decide what
          would be most valuable.
        </p>

      </div>
    </div>

  </div>
</section>

<section id="contact-main" class="container">

  <div class="row mt-4 mt-md-5">
    <div class="col-lg-8" id="feedback">

      <h2 tabindex="-1" translate>general.feedback-title</h2>

      <p>Comments and suggestions may be sent using the form below.</p>

      <div class="alert alert-success alert-dismissible" id="alert-success" role="alert" tabindex="0" *ngIf="sent">
        <h3 class="h5 my-0">Feedback Sent</h3>
        Thank you, your feedback has been submitted.
        <button type="button" class="close" data-dismiss="alert" aria-label="Close" (click)="sent=false">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="alert alert-warning alert-dismissible" id="alert-required" role="alert" tabindex="0" *ngIf="feedback.invalid">
        <h3 class="h5 my-0">Required Field(s)</h3>
        One or more fields are missing from the feedback form.
        <button type="button" class="close" data-dismiss="alert" aria-label="Close" (click)="feedback.invalid=false">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="alert alert-danger alert-dismissible" id="alert-error" role="alert" tabindex="0" *ngIf="failed">
        <h3 class="h5 my-0">Error sending feedback</h3>
        Your request could not be completed at this time.
        <button type="button" class="close" data-dismiss="alert" aria-label="Close" (click)="failed=false">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="row form-group mt-2">
        <div class="col">
          <label class="control-label mb-0">Contact Reason</label>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="reason" value="incorrect" id="reason_incorrect" required [(ngModel)]="feedback.reason">
            <label class="form-check-label" for="reason_incorrect">Report incorrect information</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="reason" value="additional" id="reason_additional" required [(ngModel)]="feedback.reason">
            <label class="form-check-label" for="reason_additional">Request additional information on BC organizations</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="reason" value="signup" id="reason_signup" required [(ngModel)]="feedback.reason">
            <label class="form-check-label" for="reason_signup">Find out how my government organization can use OrgBook BC</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="reason" value="developer" id="reason_developer" required [(ngModel)]="feedback.reason">
            <label class="form-check-label" for="reason_developer">Explore clicky things as a software developer</label>
          </div>
        </div>
      </div>

      <div class="row form-group">
        <div class="col">
          <label class="control-label mb-0">Name</label>
          <input class="form-control" size="30" name="from_name" type="text" required [(ngModel)]="feedback.from_name">
        </div>
      </div>

      <div class="row form-group">
        <div class="col">
          <label class="control-label mb-0">Email address</label>
          <input class="form-control" size="30" name="from_email" type="email" required [(ngModel)]="feedback.from_email">
        </div>
      </div>

      <div class="row form-group">
        <div class="col">
          <label class="control-label mb-0">Question <span class="text-help">(optional)</span></label>
          <textarea class="form-control" name="comments" rows="6" cols="40" [(ngModel)]="feedback.comments"></textarea>
        </div>
      </div>

      <div class="row form-group">
        <div class="col text-right">
          <button type="submit" class="btn btn-bcgold" (click)="sendFeedback($event)" [ngClass]="{loading: sending}" [disabled]="sending">
            <span class="fa fa-paper-plane left"></span> {{ 'general.feedback-button-label' | translate }}
          </button>
        </div>
      </div>
    </div>

    <div class="col-lg-4 mt-4 mt-lg-0" id="links">

      <div class="card card-primary">
        <div class="card-header">
          <h2 class="h5 my-0" tabindex="-1" translate>general.links-title</h2>
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">
            <a href="https://vonx.io/" rel="external">Verifiable Organizations Network</a> <span class="small fa fa-external-link"></span>
          </li>
          <li class="list-group-item">
            <a href="https://github.com/bcgov/aries-vcr" rel="external">Fork us on GitHub</a> <span class="small fa fa-external-link"></span>
          </li>
        </ul>
      </div>

    </div>
  </div>

</section>
